<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML5 Test page</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style type="text/css">
			body { min-width: 200px; }
			#c { border: 1px solid #333; width: 100%; height: 240px; }
			#btn { width: 100%; height: 50px; }
		</style>
		<script type="text/javascript">
			var intId1 = 0;
			var intId2 = 0;
			
			function getRandomInt(min, max)
			{
				return Math.floor(Math.random() * (max - min + 1)) + min;
			}
			
			function draw(){
				// get button
				btn = document.getElementById('btn');
				isStarted = btn.innerHTML == 'Stop';
				if (isStarted) {
					btn.innerHTML = 'Click me!';
					// stop drawing
					clearInterval(intId1);
					clearInterval(intId2);
					return;
				} else {
					btn.innerHTML = 'Stop';
				}
				
				// get canvas and context
				var canvas = document.getElementById('c');
				var ctx = canvas.getContext('2d');
				
				// initial canvas settings
				ctx.canvas.width = window.innerWidth;
				ctx.lineWidth = '3';
				
				// start drawing
				intId1 = setInterval(function() { drawCanvas(ctx); }, 3000);
				intId2 = setInterval(function() { drawLine(ctx); }, 300);
			}
			
			function drawLine(ctx) {
				x = getRandomInt(0, window.innerWidth);
				y = getRandomInt(0, 240);
				
				ctx.lineTo(x, y);
				ctx.stroke();
			}
			
			function drawCanvas(ctx) {
				// clear canvas
				ctx.fillStyle = '#fff';
				ctx.fillRect(0, 0, window.innerWidth, 240);
				
				// color
				r = getRandomInt(0, 255).toString(16);
				g = getRandomInt(0, 255).toString(16);
				b = getRandomInt(0, 255).toString(16);
				ctx.strokeStyle = '#'+r.toString()+g.toString()+b.toString();
				
				// first point
				ctx.beginPath();
				ctx.moveTo(getRandomInt(0, window.innerWidth), getRandomInt(0, 240));
			}
		</script>
	<head>
	<body>
		<h1>Hello world</h1>
		<canvas id="c" height="240">
			Your browser dosen't support &lt;canvas&gt; element.
		</canvas>
		<button id="btn" onclick="draw()">Click me!</button>
	</body>
</html>